$mci-default-color: var(--color-text-3);
$mci-default-bd-color: var(--color-fill-3);
$mci-default-bg-color: var(--color-fill-3);
$mci-default-hover-color: var(--color-text-4);
$mci-default-hover-bd-color: var(--color-fill-4);
$mci-default-hover-bg-color: var(--color-fill-4);
$mci-default-active-color: var(--color-text-5);
$mci-default-active-bd-color: var(--color-fill-5);
$mci-default-active-bg-color: var(--color-fill-5);
$mci-default-disabled-color: var(--color-text-5);
$mci-default-disabled-bd-color: var(--color-fill-2);
$mci-default-disabled-bg-color: var(--color-fill-2);

$mci-primary-color: var(--color-text-1);
$mci-primary-bd-color: var(--color-brand-6);
$mci-primary-bg-color: var(--color-brand-6);
$mci-primary-hover-color: var(--color-text-1);
$mci-primary-hover-bd-color: var(--color-brand-5);
$mci-primary-hover-bg-color: var(--color-brand-5);
$mci-primary-hover-text-color: var(--color-brand-2);
$mci-primary-active-color: var(--color-text-1);
$mci-primary-active-bd-color: var(--color-brand-7);
$mci-primary-active-bg-color: var(--color-brand-7);
$mci-primary-disabled-color: var(--color-text-1);
$mci-primary-disabled-bd-color: var(--color-brand-3);
$mci-primary-disabled-bg-color: var(--color-brand-3);

$mci-danger-color: var(--color-danger-6);
$mci-danger-bd-color: var(--color-danger-1);
$mci-danger-bg-color: var(--color-danger-1);
$mci-danger-hover-color: var(--color-white);
$mci-danger-hover-bd-color: var(--color-danger-5);
$mci-danger-hover-bg-color: var(--color-danger-5);
$mci-danger-active-color: var(--color-white);
$mci-danger-active-bd-color: var(--color-danger-7);
$mci-danger-active-bg-color: var(--color-danger-7);
$mci-danger-disabled-color: var(--color-text-1);
$mci-danger-disabled-bd-color: var(--color-danger-2);
$mci-danger-disabled-bg-color: var(--color-danger-2);

.mci-button {
  height: initial;
  padding: 8px 16px;
  &.el-button--default {
    --el-button-text-color: #{$mci-default-color};
    --el-button-bg-color: transparent;
    --el-button-border-color: #{$mci-default-hover-bg-color};
    --el-button-hover-text-color: #{$mci-default-hover-color};
    --el-button-hover-bg-color: #{$mci-default-hover-bg-color};
    --el-button-hover-border-color: #{$mci-default-hover-bd-color};
    --el-button-active-text-color: #{$mci-default-active-color};
    --el-button-active-color: var(--color-text-6);
    --el-button-active-bg-color: #{$mci-default-active-bg-color};
    --el-button-active-border-color: #{$mci-default-active-bd-color};
    --el-button-disabled-text-color: #{$mci-default-disabled-color};
    --el-button-disabled-bg-color: #{$mci-default-disabled-bg-color};
    --el-button-disabled-border-color: #{$mci-default-disabled-bd-color};
    &.is-plain {
      --el-button-bg-color: var(--color-fill-1);
      --el-button-border-color: var(--color-line-3);
      --el-button-hover-border-color: var(--color-line-3);
      --el-button-hover-bg-color: var(--color-fill-4);
      --el-button-active-border-color: var(--color-fill-5);
      --el-button-active-bg-color: var(--color-fill-5);
      &.is-disabled {
        border-color: var(--color-line-3);
        background-color: var(--color-fill-2);
        color: var(--color-text-2);
      }
      &.is-disabled:hover {
        border-color: var(--color-line-3);
        background-color: var(--color-fill-2);
        color: var(--color-text-2);
      }
    }
    &.is-plain:hover,
    &.is-plain:focus {
      background-color: var(--color-brand-1);
      color: var(--color-brand-5);
    }
    &.is-link {
      color: var(--color-text-4);
    }
    &.is-link:hover {
      color: var(--color-text-3);
    }
    &.is-link:focus {
      color: var(--color-text-6);
    }
  }
  &.el-button--info {
    --el-button-bg-color: var(--color-fill-3);
    --el-button-border-color: var(--color-fill-3);
    --el-button-text-color: var(--color-text-5);
    --el-button-hover-text-color: var(--color-text-4);
    --el-button-hover-border-color: var(--color-fill-3);
    --el-button-hover-bg-color: var(--color-fill-4);
  }
  &.el-button--primary,
  &.el-button--success {
    --el-button-text-color: #{$mci-primary-color};
    --el-button-bg-color: #{$mci-primary-bg-color};
    --el-button-border-color: #{$mci-primary-bd-color};
    --el-button-hover-text-color: #{$mci-primary-hover-color};
    --el-button-hover-bg-color: #{$mci-primary-hover-bg-color};
    --el-button-hover-border-color: #{$mci-primary-hover-bd-color};
    --el-button-active-color: var(--color-brand-8);
    --el-button-active-text-color: #{$mci-primary-active-color};
    --el-button-active-bg-color: #{$mci-primary-active-bg-color};
    --el-button-active-border-color: #{$mci-primary-active-bd-color};
    --el-button-disabled-text-color: #{$mci-primary-disabled-color};
    --el-button-disabled-bg-color: #{$mci-primary-disabled-bg-color};
    --el-button-disabled-border-color: #{$mci-primary-disabled-bd-color};

    &.is-plain {
      --el-button-bg-color: var(--color-brand-1);
      --el-button-border-color: var(--color-brand-6);
      --el-button-hover-border-color: var(--color-brand-4);
      --el-button-hover-bg-color: var(--color-fill-1);
      --el-button-active-border-color: var(--color-brand-4);
      --el-button-active-bg-color: var(--color-fill-1);

      color: var(--color-brand-6);
      &.is-disabled {
        // border-color: var(--color-line-3);
        // background-color: var(--color-fill-2);
        // color: var(--color-text-2);
        --el-button-bg-color: var(--color-brand-1);
        --el-button-border-color: var(--color-brand-6);
        --el-button-hover-border-color: var(--color-brand-4);
        --el-button-hover-bg-color: var(--color-fill-1);
        --el-button-active-border-color: var(--color-brand-4);
        --el-button-active-bg-color: var(--color-fill-1);
        color: var(--color-brand-6);
        border-color: var(--color-brand-6);
        background-color: var(--color-brand-1);
      }
      &.is-disabled:hover { 
        --el-button-bg-color: var(--color-fill-1);
        --el-button-border-color: var(--color-brand-6);
        --el-button-hover-border-color: var(--color-brand-4);
        --el-button-hover-bg-color: var(--color-fill-1);
        --el-button-active-border-color: var(--color-brand-4);
        --el-button-active-bg-color: var(--color-fill-1);
        color: var(--color-brand-6);
        border-color: var(--color-brand-6);
        background-color: var(--color-brand-1);
      }
    }
    &.is-plain:hover{
      background-color: var(--color-brand-2);
    }

    &.is-link {
      color: var(--color-brand-6);
    }
    &.is-link:hover {
      color: var(--color-brand-4);
    }
    &.is-link:focus {
      color: var(--color-brand-8);
    }
  }

  &.el-button--warning,
  &.el-button--danger {
    --el-button-text-color: #{$mci-danger-color};
    --el-button-bg-color: #{$mci-danger-bg-color};
    --el-button-border-color: #{$mci-danger-bd-color};
    --el-button-hover-text-color: #{$mci-danger-hover-color};
    --el-button-hover-bg-color: #{$mci-danger-hover-bg-color};
    --el-button-hover-border-color: #{$mci-danger-hover-bd-color};
    --el-button-active-text-color: #{$mci-danger-active-color};
    --el-button-active-bg-color: #{$mci-danger-active-bg-color};
    --el-button-active-border-color: #{$mci-danger-active-bd-color};
    --el-button-disabled-text-color: #{$mci-danger-disabled-color};
    --el-button-disabled-bg-color: #{$mci-danger-disabled-bg-color};
    --el-button-disabled-border-color: #{$mci-danger-disabled-bd-color};
  }

}
